<template>
  <div class="info">
    <pageManage>
      <template #head>
        <div style="margin-right: 10px">
          <a-input v-model:value="searchFun.searchInfo.search" placeholder="搜索权限名称"></a-input>
        </div>
        <a-button type="primary" @click="searchFun.searchClick">
          <SearchOutlined />
          查询
        </a-button>
        <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
      </template>
      <template #middle>
        <div style="margin-bottom: 15px">
          <a-space :size="8">
            <a-button type="primary" @click="cli_newAdd">
              <PlusOutlined />
              新增
            </a-button>
            <a-button type="primary" danger @click="cli_newDelt">
              <delete-outlined />
              删除
            </a-button>
          </a-space>
        </div>
        <div>
          <a-table
            :columns="table.columns"
            :data-source="portComList"
            :pagination="false"
            :scroll="{ y: table.tableHeight }"
            :row-selection="table.rowSelection"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'option'">
                <div>
                  <a-button style="width: 40px" type="link" danger :size="'small'" @click="table.cliDelete(record)">
                    删除
                  </a-button>
                </div>
              </template>
              <template v-if="column.key === 'isGroup'">
                <span>{{ record.isGroup ? '是' : '否' }}</span>
              </template>
            </template>
          </a-table>
        </div>
      </template>
      <template #foot>
        <a-pagination
          v-model:current="pagFun.pagInfo.pageNo"
          show-quick-jumper
          :total="pagFun.pagInfo.total"
          :responsive="false"
          @change="pagFun.onChange"
        />
      </template>
    </pageManage>
    <transPermi
      v-if="isShowmytransPermi"
      ref="mytransPermi"
      @close-modal="closeModal"
      @add-success="addSuccess"
    ></transPermi>
    <!--删除弹框    -->
    <a-modal v-model:visible="deleteFun.isDelete" title="删除" @ok="deleteFun.deleteOk">
      {{ `确认删除 ${deleteFun.name} 吗 ?` }}
    </a-modal>
  </div>
</template>

<script setup>
import { inject, ref, reactive, onMounted, nextTick, computed, toRefs, defineEmits } from 'vue'
import { DeleteOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import pageManage from './pageManage'
import factory from '../factory'
import transPermi from './transfercPermi2'
const { currentItemId } = inject('roleParams')
const portComList = ref([])
//==翻页功能======================
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    // table.getTableData()
    let post = { ...pagFun.pagInfo, ...searchFun.searchInfo, role: currentItemId.value.key }
    table.getTableData(post)
  },
})
//==表格================
const table = reactive({
  columns: [
    {
      title: '操作',
      key: 'option',
      width: 120,
    },
    {
      title: '权限名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '权限标识',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '是否权限组',
      dataIndex: 'isGroup',
      key: 'isGroup',
    },
  ],
  tableHeight: 332,
  getTableData: (pag = { ...pagFun.pagInfo, role: currentItemId.value.key }) => {
    factory.getPerBound(pag).then((res) => {
      portComList.value = res.data.dataList
      pagFun.pagInfo.total = Number(res.data.totalCount)
    })
  },
  selectedRows: [],
  rowSelection: {
    checkStrictly: false,
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
      table.selectedRows = selectedRows
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows)
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows)
    },
  },
  cliDelete: (record) => {
    deleteFun.name = record.name
    deleteFun.isDelete = true
    deleteFun.curItem = [record.key]
  },
})
table.getTableData()
onMounted(() => {
  let ele = document.getElementsByClassName('middle')
  table.tableHeight = ele[0].offsetHeight - 32 - 55 - 10 - 112 - 22
})

/***查询功能************************/
const searchFun = reactive({
  searchInfo: { search: '' },
  searchClick: () => {
    pagFun.pageNo = 1
    let post = { ...pagFun.pagInfo, ...searchFun.searchInfo, role: currentItemId.value.key }
    table.getTableData(post)
  },
  reset: () => {
    searchFun.searchInfo = { search: '' }
  },
})

//==添加-==穿梭框 mytransPermi
const mytransPermi = ref(null)
const isShowmytransPermi = ref(false)
const cli_newAdd = () => {
  isShowmytransPermi.value = true
  nextTick(() => {
    mytransPermi.value.changeVisible()
  })
}
const cli_newDelt = () => {
  if (!table.selectedRows.length) {
    message.warning('请先勾选需要删除的项')
    return
  }
  deleteFun.name = '选中项'
  deleteFun.isDelete = true
  deleteFun.curItem = table.selectedRows.map((m) => {
    return m.key
  })
}
const closeModal = () => {
  isShowmytransPermi.value = false
}
const addSuccess = () => {
  table.getTableData()
}

//==删除============================
const deleteFun = reactive({
  name: '',
  isDelete: false,
  curItem: [],
  deleteOk: () => {
    let post = { privileges: deleteFun.curItem, role: currentItemId.value.key }
    factory.getPerUnbind(post).then((res) => {
      table.getTableData()
      deleteFun.isDelete = false
      table.selectedRows = []
    })
  },
})
</script>
